<template>
  <div class="admin-page">
    <div class="admin-page-head">
        <div class="top">
          <van-image round fit="cover" src="https://img95.699pic.com/xsj/2h/mq/48.jpg%21/fh/300"  />
          <div class="name">
            <p>admin</p>
            <p  ><van-icon name="edit"  />编辑个人信息</p>
          </div>
        </div>
        <!-- 管理员功能 -->
     </div>
     <div class="admin-page-content">
        <div class="head">
          <h3>功能管理</h3>
          <router-link to="">更多功能 <van-icon name="arrow" /></router-link>
        </div>
        <van-row>
          <van-col span="6">
            <router-link class="admin-link" to="/admin_users">
                <van-badge >
                    <gh-icon name="user-paid" />
                  </van-badge>
                  <p>用户管理</p>
              </router-link>
          </van-col>
          <van-col span="6">
            <router-link class="admin-link" to="/admin_notice">
                <van-badge >
                    <gh-icon name="user-shipped" />
                  </van-badge>
                  <p>公告管理</p>
              </router-link>
          </van-col>
          <van-col span="6">
            <router-link class="admin-link" to="/admin_consultants">
                <van-badge >
                    <gh-icon name="consult-doctor" />
                  </van-badge>
                  <p>咨询师管理</p>
              </router-link>
          </van-col>
          <van-col span="6">
            <router-link class="admin-link" to="/admin_appoint">
                <van-badge >
                    <gh-icon name="user-finished" />
                  </van-badge>
                  <p>预约管理</p>
              </router-link>
          </van-col>
        </van-row>
      </div>
       <!-- 工具栏 -->
    <div class="admin-page-group">
        <van-cell
        v-for="(item, i) in tools"
          :key="i"
          :title="item.label"
          :to="item.path"
          is-link
          :border="false" >
          <template #icon><gh-icon  :name="`user-tool-0${4 + i}`" /></template>
        </van-cell>
      </div>
      <van-button class="layout" native-type="submit" @click="layout" block round type="primary">
        退出登录
      </van-button>
  </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {useRouter} from 'vue-router'
import {useUserStore}from '@/stores'
import { Toast, Dialog } from 'vant';
import 'vant/es/toast/style'

// tools数据
const tools = [
  { label: '返回用户端', path: '/user' },
  { label: '编辑-关于我们', path: '' },
  { label: '系统管理员管理', path: '' },
  { label: '更多设置', path: '' }
]

const store = useUserStore()
const router = useRouter()
//退出登录
const layout=async()=>{
    await Dialog.confirm({
    title: '温馨提示',
    message: '您确认退出登录吗？'
  })
   .then(() => {
    store.delUser()
    localStorage.removeItem('tokenStr')
    router.push('/login')
    Toast.success('您已退出登录')
  })
  .catch(() => {
    Toast('取消操作')
  });
}


</script>

<style lang="scss" scoped>
    .admin-page{
           background-color: var(--gh-bg);
           min-height: calc(100vh - 50px);
           width: 100%;
           padding: 0 15px 10px;
           &-head{
              height: 110px; 
              background: linear-gradient(180deg, rgba(39, 152, 239, 0.46), rgba(44, 181, 165, 0));
              margin: 0 -15px;
              padding: 0 20px;
              .top{
                display: flex;
                padding-top: 25px;
                align-items: center;
                .van-image{
                    width: 70px;
                    height: 70px;
                }
                .name {
                    padding-left: 10px;
                    p {
                      &:first-child {
                        font-size: 18px;
                        font-weight: 500;
                      }
                      &:last-child {
                        margin-top: 10px;
                        color: var(--gh-primary);
                        font-size: 16px;
                      }
                    }
                  }
              }

           }
           &-content{
            background: #fff;
            border-radius: 10px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            width: 100%;
            .head{
                display: flex;
                justify-content: space-between;
                line-height: 50px;
                padding: 0 15px;
                a{
                    color:var(--gh-tip)
                }
             }
             .van-col{
                text-align: center;
                .gh-icon{
                    font-size: 28px;
                }
                p{
                    font-size: 12px;
                    padding-top: 4px;
                }
             }
           }
           &-group{
             background-color: #fff;
             border-radius: 8px;
             overflow: hidden;
             .van-cell{
                align-items: center;
             }
             .gh-icon{
                font-size: 17px;
                margin-right: 10px;
             }
       
           }
          .layout{
            margin-top: 40px;
            width: 50%;
            left: 50%;
            font-family: '宋体';
            height: 35px;
            transform: translate(-50% );
          }
    }
</style>
